<template>
  <div id="wordcloud" />
</template>

<script>
import 'echarts-wordcloud'

export default {
  /* eslint-disable */
  mounted () {
    const data = [{
      name: 'iPhone 13',
      value: 100 * Math.random()
    },
    {
      name: '优品好货',
      value: 100 * Math.random()
    },
    {
      name: '华为P50',
      value: 100 * Math.random()
    },
    {
      name: '一加10 Pro',
      value: 100 * Math.random()
    },
    {
      name: '可口可乐',
      value: 100 * Math.random()
    },
    {
      name: '三星手机',
      value: 100 * Math.random()
    },
    {
      name: '小米12',
      value: 100 * Math.random()
    },
    {
      name: 'iWatch 5',
      value: 100 * Math.random()
    }]

    const chart = this.$echarts.init(document.getElementById('wordcloud'))
    chart.setOption({
      series: {
        type: 'wordCloud',
        data,
        shape: 'square',
        sizeRange: [20, 50],
        rotationRange: [0, 0],
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#3334'
          }
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
#wordcloud {
  width: 100%;
  height: 100%;
}
</style>
